<template>
  <div class="survey container-content">
    <el-row :gutter="20">
      <el-col :span="24">
        <h3 class="panel-title">安全库存</h3>
      </el-col>
    </el-row>
    <el-divider class="divider"></el-divider>
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-row class="export-container">
          <el-button type="primary" @click="addNewData">新增</el-button>
        </el-row>

        <!-- <el-row class="filter-container">
                    <el-col :span="24">
                        <el-input
                            placeholder="查询..."
                            v-model="searchValue"
                            class="input-with-select"
                            @change="searchData"
                        >
                            <el-button
                                slot="append"
                                icon="el-icon-search"
                                type="primary"
                                @click="searchData"
                            ></el-button>
                        </el-input>
                    </el-col>
                </el-row> -->
        <el-table
          ref="customerTable"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <!-- @selection-change="handleSelectionChange" -->
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column
            prop="materialCode"
            label="物料编码"
          ></el-table-column>
          <el-table-column
            prop="materialName"
            label="物料名称"
          ></el-table-column>
          <!-- <el-table-column
                        prop="typeName"
                        label="体表物料编码"
                    ></el-table-column> -->
          <!-- <el-table-column prop="unit" label="BOM版本"></el-table-column> -->
          <!-- <el-table-column prop="model" label="计划跟踪号">
                    </el-table-column> -->
          <el-table-column prop="baseUnit" label="计量单位"> </el-table-column>
          <el-table-column
            prop="safeInventory"
            label="安全库存量"
          ></el-table-column>
          <el-table-column prop="reorderPoint" label="再订货点">
          </el-table-column>
          <el-table-column prop="economicOrderNum" label="经济订货批量">
          </el-table-column>
          <el-table-column prop="maxInventory" label="最大库存">
          </el-table-column>
          <el-table-column prop="minInventory" label="最小库存">
          </el-table-column>
          <!-- <el-table-column prop="paramDesc" label="最小包装量">
                    </el-table-column> -->

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="详情"
                placement="bottom"
              >
                <el-button
                  plain
                  icon="el-icon-more"
                  size="small"
                  @click="handleDetail(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <el-button
                  type="primary"
                  plain
                  size="small"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <el-button
                  type="danger"
                  plain
                  size="small"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="table-pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
    >
    </el-pagination>
        <!-- 弹出框 -->
        <el-drawer
          :title="title"
          :visible.sync="drawer"
          direction="rtl"
          :before-close="handleClose"
          size="100%"
          destroy-on-close
        >
          <div class="drawer-content">
            <FormCom ref="formRef" v-if="title == '新增'" />
            <Formedit
              ref="formRef"
              v-if="title == '修改'"
              :listid="listid"
            />
            <Formdetail
              ref="formRef"
              v-if="title == '查看'"
              :listid="listid"
            />
          </div>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="submit">保存</el-button>
          </div>
        </el-drawer>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getMaxMinInventoryList,deleteMaxMinInventory} from "@/api/bim/bim";
import FormCom from "./add/index";
import Formedit from "./edit/index";
import Formdetail from "./detail/index";
export default {
      components: {
    FormCom,
    Formedit,
    Formdetail
  },
  data() {
    return {
         drawer: false, //弹窗显示
      searchValue: "",
      total: 0,
      currentPage:1,
      pageSize:10,
      treeData: [],
      defaultProps: {
        children: "treeList",
        label: "typeName",
      },
      tableData: [],
      title:''
    };
  },
  methods: {
    getData() {
      getMaxMinInventoryList({
         limit: this.pageSize,
        page: this.currentPage,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total=res.data.total
      });
    },
    // 删除事件
    handleDelete(index, row) {
      this.$confirm("请确定要删除所选的记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          deleteMaxMinInventory(row.id).then((res) => {
            // console.log(res);
            if (res.code === 200) {
              this.tableData.splice(index, 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增按钮
    addNewData(index,row) {
    //  this.$store.dispatch("workflow/getModel", {
    //             menuId: this.$route.meta.menuId,
    //             type: "launch",
    //             businessType:'29'
    //         });
         this.title='新增'
      this.drawer = true;
    },
    //编辑按钮
    handleEdit(index, row) {
    //   console.log(row);
      this.listid=row.id
         this.title='修改'
      this.drawer = true;
    },
    // 详情按钮
    handleDetail(index, row) {
       this.listid=row.id
         this.title='查看'
      this.drawer = true;
    },
     submit() {
      this.$refs.formRef.onSubmit();
      this.drawer = false;
      this.getData();
    },
     // 取消
    cancelForm() {
      this.drawer = false;
      this.getData();
    },
    // 关闭 drawer
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.rowId = "";
          this.getData();
        })
        .catch((_) => {});
    },
     // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
.export-container {
  margin: 15px 0;
}
.pagination {
  margin-top: 10px;
}
</style>
